<template>
	<view>
		<view>
			<uni-card class="uni-card">
				<uni-row>
					<uni-col :span="2" offset="1">
						<view>
							<image src="../../static/p2.png" style="height: 38px;width: 38px;"></image>
						</view>
					</uni-col>
					<uni-col :span="4" offset="3">
						<uni-row>
							<view class="top">
								预约入园时间
							</view>
						</uni-row>
						<uni-row>
							<view class="top1">
								2024年6月03日  09:00-11:00
							</view>
						</uni-row>
					</uni-col>
				</uni-row>
			</uni-card>
		</view>
		<uni-row>
			<uni-col span="10" offset="1">
			    <view class="two">
			        预约信息
		        </view>
		    </uni-col>
		</uni-row>
		<view>
			<uni-card class="uni-card1">
				<view >
					<text class="top21">团体名称</text><text class="top22">*</text><text class="top23">:</text>
					<uni-easyinput  placeholder="请输入团体名称" ></uni-easyinput>
				</view>
				<view >
					<text class="top21">团体人数</text><text class="top22">*</text><text class="top23">:</text>
					<uni-easyinput  placeholder="请输入团体人数" ></uni-easyinput>
				</view>
			</uni-card>
		</view>
		<view v-for="(form, index) in forms" :key="index">
			<uni-row>
				<uni-col span="10" offset="1">
				    <view class="two">
				        团体负责人{{index + 1}}
			        </view>
			    </uni-col>
				<uni-col span="50" offset="10">
					<view>
						<uni-icons @click="del1(index)" type="trash" size="20" color="black"></uni-icons>
					</view>
				</uni-col>
			</uni-row>
			<uni-card class="uni-card1-1">
				<view >
					<text class="top21">姓名</text><text class="top22">*</text><text class="top23">:</text>
					<uni-easyinput v-model="form.name" placeholder="请输入预约人姓名" ></uni-easyinput>
				</view>
				<view >
					<text class="top21">证件类型</text><text class="top22">*</text><text class="top23">:</text>
					<uni-data-select
					        v-model="form.idType"
					        :localdata="range"
					        @change="change"
					      ></uni-data-select>
				</view>
				<view>
					<text class="top21">证件号码</text><text class="top22">*</text><text class="top23">:</text>
					<uni-easyinput v-model="form.idNumber" placeholder="请输入证件号码" ></uni-easyinput>
				</view>
				<view>
					<text class="top21">手机号码</text><text class="top22">*</text><text class="top23">:</text>
					<uni-easyinput v-model="form.phoneNumber" placeholder="请输入手机号码" ></uni-easyinput>
				</view>
			</uni-card>
		</view>
		<view>
			<uni-row>
				<uni-col :span="4" offset="1">
					<button @click="add1" class="uni-button1">+添加团体负责人</button>
				</uni-col>
			</uni-row>
		</view>
		<view v-for="(form, index) in forms2" :key="index">
			<uni-row>
				<uni-col span="10" offset="1">
				    <view class="two">
				        同行人{{index + 1}}
			        </view>
			    </uni-col>
				<uni-col span="50" offset="10">
					<view>
						<uni-icons @click="del2(index)" type="trash" size="20" color="black"></uni-icons>
					</view>
				</uni-col>
			</uni-row>
			<uni-card class="uni-card1-1">
				<view >
					<text class="top21">姓名</text><text class="top22">*</text><text class="top23">:</text>
					<uni-easyinput v-model="form.name" placeholder="请输入预约人姓名" ></uni-easyinput>
				</view>
				<view >
					<text class="top21">证件类型</text><text class="top22">*</text><text class="top23">:</text>
					<uni-data-select
					        v-model="form.idType"
					        :localdata="range"
					        @change="change"
					      ></uni-data-select>
				</view>
				<view>
					<text class="top21">证件号码</text><text class="top22">*</text><text class="top23">:</text>
					<uni-easyinput v-model="form.idNumber" placeholder="请输入证件号码" ></uni-easyinput>
				</view>
				<view>
					<text class="top21">手机号码</text><text class="top22">*</text><text class="top23">:</text>
					<uni-easyinput v-model="form.phoneNumber" placeholder="请输入手机号码" ></uni-easyinput>
				</view>
			</uni-card>
		</view>
		
		<view>
			<uni-row>
				<uni-col :span="4" offset="1">
					<button @click="add2" class="uni-button1">+添加同行人</button>
				</uni-col>
			</uni-row>
		</view>
		<uni-row >
			<uni-col :span="1" offset="1">
			<view>
				<uni-icons type="info" size="20"></uni-icons>
			</view>
		</uni-col>
		<uni-col :span="15" offset="1">
			<view class="one">
				<text>
					最多可预约成人4人，儿童3人
				</text>
			</view>
		</uni-col>
		</uni-row>
		<uni-row>
			<uni-col :span="4" offset="1">
				<button @click="sucess" class="uni-button3">提交预约</button>
			</uni-col>
		</uni-row>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	let value = ref(0)
	let range = ref([
		{ value: 0, text: "中国居民身份证" },
		{ value: 1, text: "外籍" },
		{ value: 2, text: "港澳台居民身份证" },
	])
	let change = function(){
		console.log("e:", e);
	}
	let forms = ref([{
	  name: '',
	  idType: '',
	  idNumber: '',
	  phoneNumber: ''
	}])
	let forms2 = ref([{
	  name: '',
	  idType: '',
	  idNumber: '',
	  phoneNumber: ''
	}])
	let add1 = function(){
		if (forms.value.length > 2)
		  return
		forms.value.push({
		  name: '',
		  idType: '',
		  idNumber: '',
		  phoneNumber: ''
		});
	}
	let del1 = function(index){
		forms.value.splice(index, 1);
	}
	let add2 = function(){
		if (forms2.value.length > 2)
		  return
		forms2.value.push({
		  name: '',
		  idType: '',
		  idNumber: '',
		  phoneNumber: ''
		});
	}
	let del2 = function(index){
		forms2.value.splice(index, 1);
	}
	
	let sucess = function() {
		uni.navigateTo({
			url: '/pages/leave/Booking_sucess2'
		})
	}
</script>

<style scoped>
	.uni-card{
		width: 300px;
		height: 60px;
		background: #FFFFFF;
		border-radius: 20px;
	}
	.top{
		width: 72px;
		height: 21px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #000000;
		letter-spacing: 0;
	}
	.top1{
		width: 351px;
		height: 21px;
		font-family: PingFangSC-SNaNpxibold;
		font-weight: 600;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
	}
	.top21 {
	 color: #05261b;
	 font-size: 15px;
	 font-face: PingFangSC;
	 font-weight: 400;
	 line-height: 2;
	 letter-spacing: 0;
	 paragraph-spacing: 0;
	 text-align: left;
	}
	.top22 {
	 color: #e8240f;
	 font-size: 15px;
	 font-face: PingFangSC;
	 font-weight: 400;
	 line-height: 0;
	 letter-spacing: 0;
	 paragraph-spacing: 0;
	 text-align: left;
	}
	.top23 {
	 color: #05261b;
	 font-size: 15px;
	 font-face: PingFangSC;
	 font-weight: 400;
	 line-height: 0;
	 letter-spacing: 0;
	 paragraph-spacing: 0;
	 text-align: left;
	}
	.uni-card1{
		width: 300px;
		height: 165px;
		background: #FFFFFF;
		border-radius: 12px;
	}
	.uni-card1-1{
		width: 300px;
		height: 300px;
		background: #FFFFFF;
		border-radius: 12px;
	}
	.uni-button1{
		width: 320px;
		height: 50px;
		background: #FFFFFF;
		border: 1px solid #8DCB6D;
		border-radius: 12px;
		margin-bottom: 10px;
	}
	.uni-button3{
		width: 320px;
		height: 45px;
		background: #8DCB6D;
		border-radius: 25px;
	}
	.one{
		height: 50px;
	}
</style>